<template>
  <div class="configBox" style="position: relative">
<!--     <div style="width:100px;height:50px;background:red; position:absolute;left:-120px;;top:5px;cursor:pointer;">关闭地图</div>
 -->    <el-tabs type="border-card" class="border-card" v-model="TabsValue">
      <el-tab-pane label="方法配置" name="方法" class="methodconfig">
        <el-collapse v-model="activeNames" class="activeNames">
          <!-- 钻孔 -->
          <el-collapse-item title="钻孔" name="1">
            <!-- 钻孔属性设置 -->
            <drillAttrPanel class="drill-content" ref="drillAttr" @disPlayDrillByType="disPlayDrillByType"/>
          </el-collapse-item>
          <!-- 遥感 -->
         <!--  <el-collapse-item
            title="遥感"
            name="2"
            class="historyImage"
            style="position: relative"
          >
            <div
              class="setting-button"
              style="position: absolute; right: 45px; top: 5px"
            >
              <i class="el-icon-setting"></i>
            </div>
            <div class="content historybox">
              <el-table
                :data="remoteDataList"
                @selection-change="remoteSelectRow"
                ref="Table"
                style="width: 100%"
              >
                <el-table-column prop="stagename" label="批次名称" width="80">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="渲染"
                  type="selection"
                  width="80"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item> -->
          <!-- ERT -->
          <el-collapse-item title="ERT" name="3">
            <!-- ERT属性设置 -->
            <ertAttrPanel class="ert-content" ref="ertAttr" />
            <!-- <div
              class="setting-button"
              style="position: absolute; right: 45px; top: 5px"
              @click="showSettingPanel('ERT')"
            >
              <i class="el-icon-setting"></i>
            </div> -->
            <!-- <div class="content historybox">
              <el-table
                :data="ertDataList"
                @selection-change="ertSelectRow"
                ref="Table"
                style="width: 100%"
              >
                <el-table-column
                  prop="properties.stagename"
                  label="批次名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="properties.name"
                  label="名称"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="渲染"
                  type="selection"
                  width="80"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div> -->
          </el-collapse-item>
          <!-- EM -->
          <el-collapse-item title="EM" name="4">
            <!-- EM属性设置 -->
            <emAttrPanel class="em-content" ref="emAttr" />
            <!-- <div
              class="setting-button"
              style="position: absolute; right: 45px; top: 5px"
              @click="showSettingPanel('EM')"
            >
              <i class="el-icon-setting"></i>
            </div> -->
            <!-- <div class="content historybox">
              <el-table
                :data="emDataList"
                @selection-change="emSelectRow"
                ref="Table"
                style="width: 100%"
              >
                <el-table-column
                  prop="properties.stagename"
                  label="批次名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="properties.name"
                  label="名称"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="渲染"
                  type="selection"
                  width="80"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div> -->
          </el-collapse-item>
          <!-- 监测井取样 -->
          <el-collapse-item
            title="监测井"
            name="5"
            style="position: relative"
          >
            <!-- 钻孔属性设置 -->
            <wellAttrPanel class="drill-content" ref="drillAttr" @disPlayWellByType="disPlayWellByType" />
            <!-- <div
              class="setting-button"
              style="position: absolute; right: 45px; top: 5px"
              @click="showSettingPanel('well')"
            >
              <i class="el-icon-setting"></i>
            </div>
            <div class="content historybox">
              <el-table
                :data="wellDataList"
                @selection-change="wellSelectRow"
                ref="Table"
                style="width: 100%"
              >
                <el-table-column
                  prop="properties.stagename"
                  label="批次名称"
                  width="80"
                >
                </el-table-column>
                <el-table-column
                  prop="properties.name"
                  label="名称"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="渲染"
                  type="selection"
                  width="80"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div> -->
          </el-collapse-item>
          <!-- 精细化地形 -->
          <!-- <el-collapse-item
            title="精细化地形"
            name="6"
            style="position: relative"
          >
            <div
              class="setting-button"
              style="position: absolute; right: 45px; top: 5px"
              @click="showSettingPanel('terrain')"
            >
              <i class="el-icon-setting"></i>
            </div>
            <div class="content historybox">
              <el-table
                :data="terrainDataList"
                @selection-change="terrainSelectRow"
                ref="Table"
                style="width: 100%"
              >
                <el-table-column prop="stagename" label="批次名称" width="80">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  align="center"
                  width="160"
                >
                </el-table-column>
                <el-table-column
                  label="渲染"
                  type="selection"
                  width="80"
                  align="center"
                >
                </el-table-column>
              </el-table>
            </div>
          </el-collapse-item> -->
        </el-collapse>
      </el-tab-pane>
      <el-tab-pane label="模型列表" name="模型">
        <el-row class="input-row">
          <el-input
            v-model="queryParams.modelName"
            placeholder="模型名称"
            class="queryInput"
            clearable
            size="small"
          />
          <el-button type="primary" icon="el-icon-search" size="mini"
            >搜索</el-button
          >
        </el-row>
        <el-row class="table-row">
          <el-table
            :data="remoteDataList"
            @selection-change="remoteSelectRow"
            ref="modelTable"
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              align="center"
              width="165"
            >
            </el-table-column>
            <el-table-column
              label="渲染"
              type="selection"
              width="100"
              align="center"
            >
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import drillAttrPanel from "./drillAttrPanel.vue";
import wellAttrPanel from "./wellAttrPanel.vue";
import emAttrPanel from "./emAttrPanel.vue";
import ertAttrPanel from "./ertAttrPanel.vue";
export default {
  name: "showConfig",
  props: {
    // 遥感数据
    remoteDataList: {
      type: Array,
    },
    // 钻孔数据
    drillDataList: {
      type: Array,
    },
    // ERT数据
    ertDataList: {
      type: Array,
    },
    // EM数据
    emDataList: {
      type: Array,
    },
    // 监测井取样
    wellDataList: {
      type: Array,
    },
    // 精细化地形
    terrainDataList: {
      type: Array,
    },
  },
  components: {
    drillAttrPanel,
    emAttrPanel,
    ertAttrPanel,
    wellAttrPanel
  },
  data() {
    return {
      TabsValue: "方法",
      activeNames: "1",
      //钻孔方法配置
      // options: [
      //   {
      //     label: "六价铬",
      //   },
      //   {
      //     label: "总铬",
      //   },
      //   {
      //     label: "坤",
      //   },
      //   {
      //     label: "锂",
      //   },
      //   {
      //     label: "镍",
      //   },
      // ],
      //EM属性选择
      // EmOptions: [
      //   {
      //     label: "EC475Hz[mS/m]",
      //   },
      //   {
      //     label: "EC1625Hz[mS/m]",
      //   },
      //   {
      //     label: "EC5475Hz[mS/m]",
      //   },
      //   {
      //     label: "EC18575Hz[mS/m]",
      //   },
      //   {
      //     label: "TotalEC[mS/m]",
      //   },
      //   {
      //     label: "MSusc475Hz[1/1000]",
      //   },
      //   {
      //     label: "MSusc1625Hz[1/1000]",
      //   },
      // ],
      // optionsColor: [
      //   {
      //     value: "1",
      //     label: "#FFF200",
      //   },
      //   {
      //     value: "2",
      //     label: "#232B99",
      //   },
      // ],
      // zuanK: {
      //   value: "六价铬",
      //   colorValue: null,
      //   checked2: false,
      //   num1: 1,
      //   num2: 10,
      //   sliderValue: 15,
      // },
      // EmK: {
      //   value: "EC475Hz[mS/m]",
      //   colorValue: null,
      //   checked2: false,
      //   num1: 1,
      //   num2: 10,
      //   sliderValue: 15,
      // },
      // ertK: {
      //   color: "rgba(255,0,0,1)",
      //   checked2: false,
      //   endTime: null,
      //   startTime: null,
      //   width: 5,
      //   sliderValue: 15,
      //   checked3D: false,
      //   checkedErro: false,
      // },
      //模型查询
      queryParams: {
        modelName: null,
      },
    };
  },
  created() {},
  watch: {
    remoteDataList(val) {
      if (val.length) {
        this.activeNames = "2";
      }
    },
  },
  methods: {
    disPlayDrillByType(zuanK){
      this.$emit("switchDrillType",zuanK)
    },
    disPlayWellByType(wellK){
      this.$emit("switchWellType",wellK)
    },
    //遥感数据单选
    remoteSelectRow(selection) {
      debugger;
      if (selection.length > 1) {
        this.$refs.Table.clearSelection();
        this.$refs.Table.toggleRowSelection(selection.pop());
      }
      this.$emit("remoteListenSelectChange", selection, "remote");
    },
    // 钻孔数据勾选
    drillSelectRow(selection) {
      this.$emit("listenSelectChange", selection, "drill");
    },
    // ert数据勾选
    ertSelectRow(selection) {
      this.$emit("listenSelectChange", selection, "ert");
    },
    // 监测井数据勾选
    wellSelectRow(selection) {
      this.$emit("listenSelectChange", selection, "well");
    },
    //地形数据勾选
    terrainSelectRow(selection) {
      this.$emit("listenSelectChange", selection, "terrain");
    },
    // em数据勾选
    emSelectRow(selection) {
      this.$emit("listenSelectChange", selection, "em");
    },
    //是否显示电极点位
    ertPointChange(value) {
      this.$emit("listenSelectChange", value, "ERTCHECK");
    },
    //ert颜色变换
    ertColor(value) {
      this.$emit("listenSelectChange", value, "ERTCOLOR");
    },
    //ert宽度设置
    widthChange(value) {
      this.$emit("listenSelectChange", value, "ERTWIDTH");
    },
    //是否显示异常
    ertErroChange(value) {
      this.$emit("listenSelectChange", value, "ERTERRO");
    },
    ert3DChange(value) {
      this.$emit("listenSelectChange", value, "ERT3D");
    },
    // 显示属性面板
    showSettingPanel(name) {
      debugger;
      switch (name) {
        case "钻孔":
          this.$refs.drillAttr.showPanel = true;
          break;
        case "EM":
          this.$refs.emAttr.showPanel = true;
          break;
        case "ERT":
          this.$refs.ertAttr.showPanel = true;
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.configBox {
  height: 100%;
  /deep/ .el-input__inner {
    // height: 34px;
  }
  /deep/ .el-select .el-input .el-select__caret {
    // padding-top: 5px;
  }
  /deep/ .el-button {
    padding: 10px 20px;
  }
  // .drill-content {
  //   width: 350px;
  //   height: 300px;
  //   // background: white;
  //   // position: absolute;
  //   // left: -370px;
  //   // bottom: 20px;
  // }
  // .em-content {
  //   width: 350px;
  //   height: 300px;
  //   // background: white;
  //   // position: absolute;
  //   // left: -370px;
  //   // bottom: 20px;
  // }
  // .ert-content {
  //   width: 350px;
  //   height: 300px;
  //   background: white;
  //   position: absolute;
  //   left: -370px;
  //   bottom: 20px;
  // }
}
.border-card {
  height: 100%;
}
.methodconfig {
  height: calc(100vh - 180px);
  .activeNames {
    height: 100%;
    overflow: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
  }
  .activeNames::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  .content {
    padding: 2px 5px;
  }
}
.popup-group-item {
  border: none;
  padding: 2px 0px;
  display: flex;
  align-items: center;
}
.popup-group-item {
  label {
    margin-left: 5%;
    display: inline-block;
    width: 20%;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}
.popup-group-item .pull-left {
  height: 40px;
  display: flex;
  align-items: center;
  text-align: left;
  width: 72%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  label {
    width: 100%;
  }
  .el-checkbox {
    // margin-top: 10px;
  }
  .numsty {
    width: 70px;
    margin-left: 5px;
    margin-right: 5px;
  }
  .sliderbox {
    width: 100%;
    padding: 0px 20px;
  }
}
.historyImage {
  .historybox {
    max-height: 380px;
    overflow: auto;
  }
  /deep/ th {
    background: #f1f2f5;
  }
  /deep/ th {
    padding: 0px 0px !important;
  }
  /deep/ .el-table td {
    padding: 0px 0px !important;
  }
}
.input-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .queryInput {
    width: 250px;
    margin-right: 10px;
  }
}
.table-row {
  margin-top: 10px;
  /deep/ th {
    background: #f1f2f5;
  }
  /deep/ th {
    padding: 0px 0px !important;
  }
  /deep/ .el-table td {
    padding: 0px 0px !important;
  }
}

.setting-button {
  width: 33px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
</style>

